<template>
  <div class="message-wrapper" :class="{ 'message-ai': isAI, 'message-user': !isAI }">
    <div class="message-content">
      <div class="message-header">
        <div class="avatar">
          <el-avatar :class="isAI ? 'ai-avatar' : 'user-avatar'" :size="36">
            {{ isAI ? '助手' : '我' }}
          </el-avatar>
        </div>
        <div class="info">
          <span class="name">{{ isAI ? 'AI助手' : '我' }}</span>
          <span class="time">{{ formatTime(time) }}</span>
        </div>
      </div>
      <div class="message-bubble">
        <div v-if="isAI && loading && !content" class="typing-indicator">
          <span></span><span></span><span></span>
        </div>
        <div v-else class="message-text" v-html="formattedContent"></div>
      </div>
      
      <!-- 相关文档来源 -->
      <div v-if="isAI && sources?.length > 0" class="message-sources">
        <div class="sources-header">
          <el-icon><Document /></el-icon>
          <span>参考来源</span>
        </div>
        <div class="sources-list">
          <div v-for="(source, index) in sources" :key="index" class="source-item">
            <div class="source-content">{{ source.content }}</div>
            <div class="source-score">
              <el-tag size="small" :type="getScoreType(source.score)">
                相关度: {{ (source.score * 100).toFixed(1) }}%
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Document, Loading } from '@element-plus/icons-vue'
import { formatTime } from '@/utils/time'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt({
  breaks: true,
  linkify: true
})

const props = defineProps({
  id: {
    type: String,
    required: true
  },
  content: {
    type: [String, Object],
    required: true
  },
  role: {
    type: String,
    default: 'user',
    validator: (value) => ['user', 'assistant', 'ai_assistant'].includes(value)
  },
  loading: {
    type: Boolean,
    default: false
  },
  time: {
    type: [String, Number, Date],
    required: true
  },
  sources: {
    type: Array,
    default: () => []
  }
})

const isAI = computed(() => props.role === 'assistant' || props.role === 'ai_assistant')

const formattedContent = computed(() => {
  try {
    const content = typeof props.content === 'object' ? 
      props.content.content || JSON.stringify(props.content) : 
      props.content

    const decodedContent = decodeURIComponent(content)
    return md.render(decodedContent)
  } catch (error) {
    console.error('Failed to format content:', error)
    return String(props.content)
  }
})

const getScoreType = (score) => {
  if (score > 0.8) return 'success'
  if (score > 0.5) return 'warning'
  return 'info'
}
</script>

<style lang="scss" scoped>
.message-wrapper {
  display: flex;
  margin-bottom: $spacing-lg;
  max-width: 80%;
  
  &.message-ai {
    margin-right: auto;
    margin-left: $spacing-lg;
  }
  
  &.message-user {
    margin-left: auto;
    margin-right: $spacing-lg;
    
    .message-content {
      .message-header {
        flex-direction: row-reverse;
      }
      
      .message-bubble {
        background-color: var(--el-color-success-light-9);
        border-radius: 12px 12px 2px 12px;
      }
    }
  }
  
  .message-content {
    flex: 1;
    
    .message-header {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      margin-bottom: $spacing-xs;
      
      .info {
        display: flex;
        flex-direction: column;
        
        .name {
          font-weight: 500;
          font-size: 14px;
        }
        
        .time {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
    
    .message-bubble {
      background-color: var(--el-color-primary-light-9);
      border-radius: 12px 12px 12px 2px;
      padding: $spacing-md;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
  }
  
  .message-sources {
    margin-top: $spacing-md;
    
    .sources-header {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      margin-bottom: $spacing-sm;
      color: var(--el-text-color-secondary);
      font-size: 13px;
    }
    
    .sources-list {
      .source-item {
        background-color: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: $border-radius;
        padding: $spacing-sm;
        margin-bottom: $spacing-xs;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .source-content {
          font-size: 13px;
          color: var(--el-text-color-regular);
          margin-bottom: $spacing-xs;
          line-height: 1.5;
        }
        
        .source-score {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 4px;
  
  span {
    width: 6px;
    height: 6px;
    background-color: var(--el-text-color-regular);
    border-radius: 50%;
    animation: typing 1s infinite;
    
    &:nth-child(2) { animation-delay: 0.2s; }
    &:nth-child(3) { animation-delay: 0.4s; }
  }
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
</style> 